<template>
  <div class="moduleDistribution">
    <el-row class="module_top">
      <el-col :span="21"
              align='right'>
        <span>模板名称：</span>
        <el-input v-model="unitName"
                  placeholder="请输入模板名称"
                  class="search_inpiut"></el-input>
      </el-col>
      <el-col :span="3"
              align='right'>
        <el-button class="search_btn">搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="module_mid">
      <el-table :header-cell-style="{background:'#f5f5f5'}"
                :data="tableData"
                border
                @selection-change="handleSelectionChange"
                ref="multipleTable"
                style="width: 100%">
        <el-table-column type="selection"
                         :selectable='checkboxInit'>
        </el-table-column>
        <el-table-column prop="moduleName"
                         label="模板名称">
        </el-table-column>
        <el-table-column prop="moduleCheck"
                         label="权限查看">
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col :span="24"
              class="module_page">
        <el-pagination background
                       id="pagination"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-row style="padding:0 20px">
      <el-col :span="24"
              align="right">
        <el-button class="normal_btn">确定</el-button>
        <el-button class="normal_btn">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      unitName: "",
      currentPage: 1,
      total: 10,
      pagesize: 10,
      flag: true,
      tableData: [{
        moduleName: '管理员',
        moduleCheck: '查看',
      },
      {
        moduleName: '质量员',
        moduleCheck: '查看',
      },
      {
        moduleName: '测量员',
        moduleCheck: '查看',
      }
      ],
    }
  },
  methods: {
    handleSizeChange () {

    },
    handleCurrentChange () {

    },
    //复选框勾选
    handleSelectionChange () {

    },
    //限制勾选
    checkboxInit (row, index) {
      if (this.flag == true) {

      } else {

      }
    }
  },
  created () {

  }
}
</script>
<style lang="scss" scoped>
.module_top {
  padding: 20px;
}
.search_inpiut {
  width: 20%;
}
.search_btn {
  width: 100px;
  background: #1abc9c;
  color: #fff;
}
.module_mid {
  padding: 20px;
  padding-top: 0px;
}
.module_page {
  padding-bottom: 20px;
  text-align: center;
}
.normal_btn {
  width: 80px;
  background: #1abc9c;
  color: #fff;
}
/deep/ #pagination .el-pager .active {
  background: #1abc9c;
}
/deep/ #pagination .el-pager .active:hover {
  color: #fff;
}
/deep/ #pagination .el-pager li:hover {
  color: #1abc9c;
}
</style>

